<template>
    <div>
        <div style="width: 100%;display: flex;justify-content: center;">
          <div style="width: 1200px;">
            <div>
                <div style="display: flex;align-items: center;border-bottom: 1px solid #e6e6e6;padding: 20px 0;margin-top: 10px;">
                    <div style="height: 16px;width: 8px;background-color:#256aff;border-radius: 5px;margin-right: 10px;"></div>
                    <el-breadcrumb :separator-icon="ArrowRight">
                      <!-- <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item> -->
                      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
                      <el-breadcrumb-item :to="{ path: '' }">客户案例</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
        <div style="display:flex;justify-content: center;flex-direction: column;font-size:26px;align-items: center;margin-top: 50px;">
          <span style="text-align: center;font-weight: bold;color:#363636">客户案例</span>
          <span style="font-size:16px;color:#c8c8c8">Custome stories</span>
        </div>
        <div style="display:flex;justify-content:space-between;margin-bottom: 50px;flex-wrap:wrap; ">
            <div class="case" :style="{'backgroundImage':'url('+baseURL_dev+item.caseImageUrl+')'}" v-for="(item,index) in caseList">
                <div class="caselist" @click="toDetail(item)">
                  <div style="padding:20px">
                    <div style="font-weight:bold;font-size:15px;text-align: center;">{{ item.caseName }}</div>
                    <div class="ltext">{{ item.caseTitle }}</div>
                    <div style="display:flex;justify-content:center;margin-top: 20px;">
                      <div><el-button class="lbtn">查看更多</el-button></div>
                    </div>
                  </div>
                </div>
            </div>
        </div>
            </div>
          </div>
        </div>
        <div style="margin-top: 100px;"></div>
      <div style="width: 100%;">
          <Foot />
      </div>
    </div>
</template>

<script setup lang="ts">
import Foot from './foot.vue'
import { ArrowRight } from '@element-plus/icons-vue'
import { onMounted,ref,watch } from 'vue'
import { useRouter, useRoute } from "vue-router";
import { $CaseList } from '../api/api'
import { baseURL_dev } from '../config/baseUrl'

  onMounted(()=>{
    loadCaseList()
  })

  let caseList = ref([])

  const loadCaseList = async ()=>{
    let ret = await $CaseList()
    console.log(ret)
    caseList.value = ret.rows
    console.log('caseList',caseList.value)
  }
const router = useRouter();

const toDetail = async(item) => {
    router.push('/caseDetail?item='+JSON.stringify(item))
}
</script>

<style scoped lang="less">
.case{
  background-size: 100% 100%;
  height:400px;
  width: 32%;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  position: relative;
  margin-top: 120px;
}
.caselist{
  width:80%;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  border-radius:10px;
  background-color: #fff;
  position: absolute;
  cursor: pointer;
  bottom: -70px;
}
.caselist:hover{
  color: #fff;
  background-color: #1c65fe;
  .ltext{
    color:#fff;
  }
  .lbtn{
    color: #3570ff;
  }
}
.lbtn{
  height:35px
}
.ltext{
  color:#cecece;
  margin-top:20px;
  font-size:12px
}
</style>